<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.layer1{height:100px;width:100%;background:blue;}
.layer1-1{height:100px;width:50%;background:#93C;float:left;}
.layer1-2{height:100px;width:50%;background:#F3C;float:left;}
.layer1-3{clear:both;}
.layer2{height:200px;width:100%;background:green;}
.layer2-1{height:100px;width:100%;background:black;}
.layer2-1-1{height:100px;width:30%;background:#3F6;float:left;}
.layer2-1-2{height:100px;width:40%;background:#CF3;float:left;}
.layer2-1-3{height:100px;width:30%;background:#0CC;float:left;}
.layer2-1-4{clear:both}
.layer2-2{height:100px;width:100%;background:orange;}
.layer2-2-1{height:50px;width:100%;background:#C3C;}
.layer2-2-2{height:50px;width:100%;background:#3C3;}
.layer3{height:100px;width:100%;background:yellow;}
</style>
</head>

<body>
    <div class="layer1">
            <div class="layer1-1"></div>
            <div class="layer1-2"></div>
            <div class="layer1-3"></div>
    </div>
    <div class="layer2">
            <div class="layer2-1">
                    <div class="layer2-1-1"></div>
                    <div class="layer2-1-2"></div>   
                    <div class="layer2-1-3"></div>
                    <div class="layer2-1-4"></div>
            </div>
            <div class="layer2-2"> 
                    <div class="layer2-2-1"></div> 
                    <div class="layer2-2-2"></div>
            </div>
     </div>
     <div class="layer3"></div>
</body>
</html>
